<template>
    <div class="profile-container">
        <div class="big_img" :style="$jspt.getImage(target.profImg)"></div>
        <div class="base-info">
            <div class="avatar" :style="$jspt.getImage(target.avatar)"></div>
            <div class="text-info">
                <div class="name">
                    {{ `${target.name} [ ${target.dept} - ${target.group} ]` }}
                </div>
            </div>
            <div class="propular-info">

            </div>
        </div>
        <div class="profile-main-container">
            <div class="p-m-c-guides" v-if="target.sid === $store.state.user.sid">
                <router-link v-for="(item, index) in guideList" :key="index" :to="item.path">
                    <div class="p-m-c-g-item" :style="getStyle(item.path)">
                        {{item.context}}
                    </div>
                </router-link>
            </div>
            <div class="p-m-c-container">
                <router-view/>
            </div>
        </div>
    </div>
</template>

<script>
import vuex from '@prof/js/vuex.js';
import $ from "jquery";

export default {
    data() {
        return {
            guideList: [],
            target: this.$store.state.view.profile.user
        }
    },
    mounted() {
        this.guideList = vuex.state.guideItems;
        $('.base-info').animate({height: "130px"});
    },
    methods: {
        getStyle(v) {
            if (this.$route.path === v) {
                return {
                    background: "rgb(65, 116, 255)",
                    color: "white"
                }
            }
        }
    }
}
</script>

<style lang="scss">
@import "@prof/scss/index.scss";
</style>